<script setup lang="ts">
  import { getAllPermissions } from '@/api-new2/system/role';
  import { useSkeleton } from '@/hooks/arco/useSkeleton';

  const columns = [
    {
      title: '操作对象',
      dataIndex: 'name',
    },
    {
      title: '权限',
      dataIndex: 'role',
      slotName: 'role',
    },
    {
      title: '全选',
      dataIndex: 'action',
      slotName: 'action',
    },
  ];

  const roleTable = useSkeleton({
    apiFun: getAllPermissions,
    transformDataFun(data) {
      // 使用 Map 存储所有节点，以 code 为键，方便快速查找
      const nodeMap = new Map<string, any>();

      // 存储所有父级节点（没有 parentId 的）
      const parentNodes: any[] = [];

      // 第一步：遍历所有数据，区分父级和子级
      data.forEach((item: any) => {
        if (
          item.parentId === null ||
          item.parentId === undefined ||
          item.parentId === ''
        ) {
          // 没有 parentId 的是父级节点
          const parentNode = {
            ...item,
            childrenRole: [], // 初始化 children 数组
          };
          nodeMap.set(item.code, parentNode);
          parentNodes.push(parentNode);
        }
      });

      // 第二步：将子级节点添加到对应的父级 children 中
      data.forEach((item: any) => {
        if (
          item.parentId !== null &&
          item.parentId !== undefined &&
          item.parentId !== ''
        ) {
          // 有 parentId 的是子级节点
          const parentNode = nodeMap.get(item.parentId);

          if (parentNode) {
            // 找到父节点，将子节点添加到父节点的 children 中
            parentNode.childrenRole.push({
              ...item,
            });
          } else {
            // 如果找不到对应的父节点，输出警告（可选）
            console.warn(
              `找不到父节点: ${item.parentId}，子节点: ${item.code}`
            );
          }
        }
      });

      // 第三步：清理没有子节点的 children 属性（可选）
      parentNodes.forEach((node) => {
        if (node.childrenRole.length === 0) {
          delete node.childrenRole;
        }
      });

      return parentNodes;
    },
  });

  const data = [
    {
      label: '权限组ID',
      value: '014',
    },
    {
      label: '权限组名称',
      value: '院区院长',
    },
    {
      label: '关联账号数量',
      value: '10个',
    },
    {
      label: '创建时间',
      value: '2024-11-11',
    },
  ];
</script>

<template>
  <div class="col">
    <a-tabs default-active-key="1">
      <a-tab-pane key="1" title="权限组信息">
        <a-descriptions :data="data" :column="1" />
      </a-tab-pane>
      <a-tab-pane key="2" title="功能权限">
        <skeleton-view
          v-slot="{ data: tableData }"
          v-bind="roleTable.bindProps"
        >
          <a-table :columns="columns" :data="tableData" :pagination="false">
            <template #role="{ record }">
              <a-checkbox-group>
                <a-checkbox
                  v-for="item in record.childrenRole"
                  :key="item.code"
                  :value="item.code"
                  >{{ item.name }}</a-checkbox
                >
              </a-checkbox-group>
            </template>

            <template #action>
              <a-checkbox></a-checkbox>
            </template>
          </a-table>
        </skeleton-view>
      </a-tab-pane>
    </a-tabs>
  </div>
</template>

<style lang="less" scoped></style>
